<template>
  <div>
    <label v-for="(item, index) in arr" :key="index">
      <input type="checkbox" v-model="arr1" :value="item" /> {{ item }}</label
    >
    <p>
      你选中的元素累加的和为<span>{{ get }}</span>
    </p>
  </div>
</template>

<script>
export default {
  name: "sumAdd",
  components: {},
  props: {},
  data() {
    return {
      arr: [9, 15, 19, 25, 29, 31, 48, 57, 62, 79, 87],
      arr1: [],
    };
  },
  computed: {
    get() {
      return this.arr1.length ? this.arr1.reduce((sum, item) => sum + item) : 0;
    },
  },
  watch: {},
  created() {},
  methods: {},
};
</script>

<style scoped>
span {
  color: red;
  font-size: 25px;
  margin-left: 6px;
}
label {
  margin-right: 6px;
  font-size: 20px;
}
</style>
